<template>
	<view>
		<view class="body-wheel">
			<view >
				<view class="cu-form-group" style="background-color: #11CC99;">
					<view>
						<view style="font-size: 42upx;padding-left: 60upx;padding-top: 30upx;">出行情况</view>
						<view style="padding-top: 10upx;padding-left: 60upx;padding-bottom: 20upx;">里程、花费、行车轨迹</view>
					</view>
					<view>
						<text class="xl  cuIcon-formfill" :class="0==curText?'text-black':'text-white'" style="font-size: 20px;" @tap="swichText" data-id="0"></text>
						<text class="xl  cuIcon-rankfill" :class="1==curText?'text-black':'text-white'" style="font-size: 20px;margin-left: 20px" @tap="swichText" data-id="1"></text>
					</view>
				</view>
				<uni-nav-bar :fixed="false" color="#333333"  :border="false" backgroundColor="#11CC99">
					<scroll-view scroll-x scroll-with-animation :scroll-left="scrollLeft" style="z-index: 9999;">
						<!-- <tui-tabs :tabs="tabbar" :currentTab="currentTab>1?0:currentTab" @change="swichNav" itemWidth="50%" :bgColor="bgColor" :color="'#666'" :selectedColor="'#5677fc'"></tui-tabs> -->
						<view class="tui-tabs-view tui-tabs-relative" style="height:80rpx;padding:0 30rpx;background:#11CC99;top:auto">
							<view v-for="(item, index) in tabbar" :key="index" class="tui-tabs-item" style="width:50%" @tap.stop="swichNav(index)">
								<view class="tui-tabs-title" :class="{'tui-tabs-active':currentTab==index,'tui-tabs-disabled':item.disabled}"
								 :style="{color:currentTab==index?'#333333':'',fontSize:currentTab==index?'38rpx':'28rpx',lineHeight:'38rpx',fontWeight:false && currentTab==index?'bold':'normal'}">{{item.name}}</view>
							</view>
							<view class="tui-tabs-slider" :style="{transform:'translateX('+scrollLeft+'px)',width:'68rpx',height:'6rpx',bottom:'0rpx',background:'#333333'}"></view>
						</view>
					</scroll-view>
				</uni-nav-bar>
			</view>
		</view>
		<view v-if="showText">
			<view class="cuIcon-titles">里程、花费</view>
			<view class="vmodult" v-for="(item,index) in showList.spendAndMileageData">
				<uni-collapse style=";border-radius: 13upx;">
					<uni-collapse-item :title="item.spendMileageDate" subTitle="" style="font-size: ;">
						<view class="cu-form-group">
							<view class="cuIcon-timefill">里程</view>
							<view>{{item.mileage}}</view>
						</view>
						<view class="cu-form-group">
							<view class="cuIcon-moneybagfill">花费</view>
							<view>{{item.spend}}</view>
						</view>
						<view class="cu-form-group">
							<view class="cuIcon-more">其他</view>
							<view>{{item.other}}</view>
						</view>
						<view> <hr style="border : 1px dashed #EEEEEE;" /></view>
					</uni-collapse-item>
				</uni-collapse>
				<view v-if="showList.length==0" style="text-align: center;">
					<view> 暂无信息！</view>
				</view>
			</view>
			<view class="cuIcon-titles">自行外出</view>
			<view class="vmodul" v-for="(item,index) in showList.ownData">
				<view>
					<view class="">
						{{item.ownDate}}
					</view>
					<view class="cu-form-group">
						<view class="cuIcon-timefill">里程</view>
						<view>{{item.mileage}}</view>
					</view>
					<view class="cu-form-group cu-form-groupt">
						<view>步行</view>
						<view>{{item.walk}}</view>
					</view>
					<view class="cu-form-group cu-form-groupt">
						<view>出租车</view>
						<view>{{item.taxi}}</view>
					</view>
					<view class="cu-form-group cu-form-groupt">
						<view>公交车</view>
						<view>{{item.bus}}</view>
					</view>
					<view class="cu-form-group">
						<view class="cuIcon-moneybagfill">花费</view>
						<view>{{item.spend}}</view>
					</view>
					<view class="cu-form-group cu-form-groupt">
						<view>地铁</view>
						<view>{{item.spendMetro}}</view>
					</view>
					<view class="cu-form-group cu-form-groupt">
						<view>公交</view>
						<view>{{item.busSpend}}</view>
					</view>
					<view class="cu-form-group cu-form-groupt">
						<view>出租</view>
						<view>{{item.taxiSpend}}</view>
					</view>
					<view> <hr style="border : 1px dashed #EEEEEE;" /></view>
				</view>
				<view v-if="showList.length==0" style="text-align: center;">
					<view> 暂无信息！</view>
				</view>
			</view>
		</view>
		<view v-if="!showText">
			<view class="cuIcon-titles">出行方式</view>
			<view class="">
					<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
			</view>
			<view class="cu-form-group">
				<view class="cuIcon-titles">出行里程图</view>
				<Select>
					<option >
						公交
					</option>
				</Select>
			</view>
			<view class="">
					<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
			</view>
			<view class="cu-form-group">
				<view class="cuIcon-titles">出行花费图</view>
				<Select>
					<option >
						公交
					</option>
				</Select>
			</view>
			<view class="">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
			</view>
		</view>
    </view>
</template>
<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uCharts from '@/components/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	var _self;
	var canvaRing=null;
	var canvaColumn=null;
	var canvaLineA=null;
	export default {
		components: {
			uniNavBar,
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				showText:true,
				curText:0,
				showList:{spendAndMileageData:[],ownData:[]},
				tabbar: [{
					name: '全部'
				}, {
					name: '今天'
				}, {
					name: '昨天'
				}, {
					name: '本周'
				}, {
					name: '本月'
				}],
				winHeight: "", // 窗口高度
				currentTab: 0, // 预设当前项的值
				scrollLeft: 0, // tab标题的滚动条位置
				searchVal: '',
				dataList:
				{
					spendAndMileageData:
					{
						todayList:{spendMileageDate:'2018年12月',mileage:'28.435km',spend:'98元',other:'200元'},
						yesterdayList:{spendMileageDate:'2018年12月',mileage:'27.435km',spend:'98元',other:'200元'},
						thisWeekenList:{spendMileageDate:'2018年12月',mileage:'26.435km',spend:'98元',other:'200元'},
						thisMonthList:{spendMileageDate:'2018年12月',mileage:'25.435km',spend:'98元',other:'200元'},
						allList:[
								{spendMileageDate:'2018年12月',mileage:'29.435km',spend:'98元',other:'200元'},
								{spendMileageDate:'2018年11月',mileage:'29.435km',spend:'98元',other:'200元'},
								{spendMileageDate:'2018年10月',mileage:'29.435km',spend:'98元',other:'200元'},
							]
					},
					ownData:{
						todayList:{ownDate:'2018年12月',mileage:'988.43km',walk:'8.40km',taxi:'449.20km',bus:'89.3km',spend:'578元',taxiSpend:'37元',busSpend:'250元',spendMetro:'200元'},
						yesterdayList:{ownDate:'2018年12月',mileage:'986.43km',walk:'8.40km',taxi:'449.20km',bus:'89.3km',spend:'578元',taxiSpend:'37元',busSpend:'250元',spendMetro:'200元'},
						thisWeekenList:{ownDate:'2018年12月',mileage:'985.43km',walk:'8.40km',taxi:'449.20km',bus:'89.3km',spend:'578元',taxiSpend:'37元',busSpend:'250元',spendMetro:'200元'},
						thisMonthList:{ownDate:'2018年12月',mileage:'984.43km',walk:'8.40km',taxi:'449.20km',bus:'89.3km',spend:'578元',taxiSpend:'37元',busSpend:'250元',spendMetro:'200元'},
						allList:{ownDate:'2018年10月',mileage:'983.43km',walk:'8.40km',taxi:'449.20km',bus:'89.3km',spend:'578元',taxiSpend:'37元',busSpend:'250元',spendMetro:'200元'},
					}
				},
				/*基本环形*/
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:'',
				/*基本环形end*/
				/*折线图
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:'',
				/*折线图end*/
				categories:['08:00','10:00','12:00','14:00','16:00','18:00'],
				mileageRecord:{milRecord:{recordDate:'2018年12月',mileage:'28.453km',spend:'98.00元',other:'200.00元'},cardRecord:[{licenseNumber:'粤BXD523',duration:'12h30m',recordDate:'2018年12月'},{licenseNumber:'粤BXD524',duration:'11h30m',recordDate:'2018年12月'}]},
				
				
			}
		},
		onLoad() {
			console.log('首页onload')
			this.showList.spendAndMileageData=this.dataList.spendAndMileageData.allList;
			this.showList.ownData.push(this.dataList.ownData.allList);
			_self = this;
			//  高度自适应
			uni.getSystemInfo({
				success: res => {
					this.winHeight = res.windowHeight
					this.winWidth = res.windowWidth
					this.checkCor();
					
				}
			});
			/*基本环形*/
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			/* this.getServerData();
			this.getServerColumnData();
			this.getServerLineAData(); */
		},
		mounted(){
			this.getServerData();
			this.getServerColumnData();
			this.getServerLineAData();
		},
		methods: {
			// 滚动切换标签样式
			switchTab(e) {
				this.currentTab = e.detail.current
				this.checkCor()
			},
			// 判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCorSwitchTab() {
				if (this.currentTab > 3) {
					// 这里距离按实际计算
					this.scrollLeft = 300
				} else {
					this.scrollLeft = 0
				}
			},
			checkCor() {
				let tabsNum = this.tabbar.length
				let padding = this.winWidth / 750 * 30
				let width = this.winWidth - padding * 2
				let left = (width / tabsNum - (this.winWidth / 750 * 68)) / 2 + padding
				let scrollLeft = left
				if (this.currentTab > 0) {
					scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab
				}
				this.scrollLeft = scrollLeft
			},
			// 点击标题切换当前页时改变样式
			swichNav(index) {
				if(index==0){
					this.showList.spendAndMileageData=this.dataList.spendAndMileageData.allList;
					this.showList.ownData=[];
					this.showList.ownData.push(this.dataList.ownData.allList);
				}else if(index==1){
					this.showList.ownData=[];
					this.showList.spendAndMileageData=[];
					this.showList.spendAndMileageData.push(this.dataList.spendAndMileageData.todayList);
					this.showList.ownData.push(this.dataList.ownData.todayList);
				}else if(index==2){
					this.showList.ownData=[];
					this.showList.spendAndMileageData=[];
					this.showList.spendAndMileageData.push(this.dataList.spendAndMileageData.yesterdayList);
					this.showList.ownData.push(this.dataList.ownData.yesterdayList);
				}else if(index==3){
					this.showList.ownData=[];
					this.showList.spendAndMileageData=[];
					this.showList.spendAndMileageData.push(this.dataList.spendAndMileageData.thisWeekenList);
					this.showList.ownData.push(this.dataList.ownData.thisWeekenList);
				}else if(index==4){
					this.showList.ownData=[];
					this.showList.spendAndMileageData=[];
					this.showList.spendAndMileageData.push(this.dataList.spendAndMileageData.thisMonthList);
					this.showList.ownData.push(this.dataList.ownData.thisMonthList);
				}
				let item = this.tabbar[index]
				if (item && item.disabled) return
				if (this.currentTab == index) {
					return false
				} else {
					this.currentTab = Number(index)
				}
				this.checkCor();
			},
			swichText(e){
				if(e.currentTarget.dataset.id=='0'){
					this.showText=true;
					this.curText=e.currentTarget.dataset.id;
				}else if(e.currentTarget.dataset.id=='1'){
					this.showText=false;
					this.curText=e.currentTarget.dataset.id;
				}
				
			},
			search() {
			},
			/*基本环形*/
			getServerData(){
				/* uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data:{
					},
					success: function(res) {
						console.log(res.data.data)
						let Ring={series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						Ring.series=res.data.data.Ring.series;
						//自定义文案示例，需设置format字段
						for(let i = 0 ;i < Ring.series.length;i++){
							Ring.series[i].format=()=>{return Ring.series[i].name+Ring.series[i].data};
						}
						_self.textarea = JSON.stringify(res.data.data.Ring);
						_self.showRing("canvasRing",Ring);
					},
					fail: () => {
						_self.tips="网络错误，小程序端请检查合法域名";
					},
				}); */
				var res={
						  "series": [{
							"name": "公交",
							"data": 50
						  }, {
							"name": "地铁",
							"data": 30
						  }, {
							"name": "走路",
							"data": 20
						  }, {
							"name": "自驾",
							"data": 18
						  }]
						};
				let Ring={series:[]};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				Ring.series=res.series;
				//自定义文案示例，需设置format字段
				for(let i = 0 ;i < Ring.series.length;i++){
					Ring.series[i].format=()=>{return Ring.series[i].name+Ring.series[i].data};
				}
				_self.textarea = JSON.stringify(res);
				_self.showRing("canvasRing",Ring);
			},
			showRing(canvasId,chartData){
				canvaRing=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'ring',
					fontSize:8,
					padding:[5,5,5,5],
					legend:{
						show:true,
						position:'bottom',
						float:'center',
						itemGap:10,
						padding:5,
						lineHeight:26,
						margin:5,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth :1
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
					subtitle: {
						name: '70%',
						color: '#7cb5ec',
						fontSize: 25*_self.pixelRatio,
					},
					title: {
						// name: '收益率',
						// color: '#666666',
						// fontSize: 15*_self.pixelRatio,
					},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 40*_self.pixelRatio,
						  labelWidth:15
						}
					},
				});
			},
			touchRing(e){
				canvaRing.touchLegend(e, {
					animation : false
				});
				canvaRing.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data 
					}
				});
			},
			/*基本环形end*/
			/*折线图开始*/
			getServerLineAData(){
				/* debugger;
				uni.request({
					url: './data.json',
					data:{
					},
					success: function(res) {
						console.log(res.data.data)
						let LineA={categories:[],series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						LineA.categories=res.data.data.LineA.categories;
						LineA.series=res.data.data.LineA.series;
						_self.textarea = JSON.stringify(res.data.data.LineA);
						_self.showLineA("canvasLineA",LineA);
					},
					fail: () => {
						_self.tips="网络错误，小程序端请检查合法域名";
					},
				}); */
				var res= {
						  "categories": ["1月", "2月", "3月", "4月", "5月", "6月"],
						  "series": [ {
							"name": "花费",
							"data": [100, 80, 95, 150, 112, 132]
						  }]
						};
				let LineA={categories:[],series:[]};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				LineA.categories=res.categories;
				LineA.series=res.series;
				_self.textarea = JSON.stringify(res);
				_self.showLineA("canvasLineA",LineA);
			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					padding:[15,20,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:true,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
			boundaryGap:'justify'
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						format:(val)=>{return val.toFixed(0)+'元'}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'curve'
						}
					}
				});
				
			},
			touchLineA(e) {
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			/*折线图结束*/
			/*柱状图开始*/
			getServerColumnData(){
					/* uni.request({
						url: 'https://www.ucharts.cn/data.json',
						data:{
						},
						success: function(res) {
							console.log(res.data.data)
							let Column={categories:[],series:[]};
							//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
							Column.categories=res.data.data.ColumnB.categories;
							Column.series=res.data.data.ColumnB.series;
							_self.textarea = JSON.stringify(res.data.data.ColumnB);
							_self.showColumn("canvasColumn",Column);
						},
						fail: () => {
							_self.tips="网络错误，小程序端请检查合法域名";
						},
					}); */
					var res={
							  "categories": ["2013", "2014", "2015", "2016", "2017", "2018"],
							  "series": [{
								"name": "里程",
								"data": [35, 36, 31, 33, 13, 34]
							  }]
							};
					let Column={categories:[],series:[]};
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					Column.categories=res.categories;
					Column.series=res.series;
					_self.textarea = JSON.stringify(res);
					_self.showColumn("canvasColumn",Column);
				},
				showColumn(canvasId,chartData){
					canvaColumn=new uCharts({
						$this:_self,
						canvasId: canvasId,
						type: 'column',
						padding:[15,5,0,15],
						legend:{
							show:true,
							padding:5,
							lineHeight:11,
							margin:0,
						},
						fontSize:11,
						background:'#FFFFFF',
						pixelRatio:_self.pixelRatio,
						animation: true,
						categories: chartData.categories,
						series: chartData.series,
						xAxis: {
							disableGrid:true,
						},
						yAxis: {
			    data:[{
			      position:'right',
								axisLine:false,
			      format:(val)=>{return val.toFixed(0)+'里'},
			    }]
						},
						dataLabel: true,
						width: _self.cWidth*_self.pixelRatio,
						height: _self.cHeight*_self.pixelRatio,
						extra: {
							column: {
								type:'group',
								width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
							}
						  }
					});
					
				},
				touchColumn(e){
					canvaColumn.showToolTip(e, {
						format: function (item, category) {
							if(typeof item.data === 'object'){
								return category + ' ' + item.name + ':' + item.data.value 
							}else{
								return category + ' ' + item.name + ':' + item.data 
							}
						}
					});
			canvaColumn.touchLegend(e,{animation:true});
				},
			/*柱状图结束*/

		}
	}
</script>
<style>
	.cu-form-group{
		padding-left: 0upx;
	}
	.flow {
	  display: flex;
	  display: -webkit-flex;
	  background: #fff;
	  padding-bottom: 10upx;
	}
	.vmodul{
		margin-left: 0upx;
		margin-right: 0upx;
		margin-top: 22upx;
		background-color: #FCFCFC;
		padding: 22upx 22upx;
		border-radius:43upx
	}
	.vmodult{
		margin-left: 0upx;
		margin-right: 0upx;
		margin-top: 22upx;
		padding: 10upx 10upx 10upx 10upx;
		border-radius:22upx
	}
	.body-wheel{
		 background-color: #11CC99; 
	}
	/* tab start */
	.tui-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9999;
	}
	
	.tui-tabs-relative {
		position: relative;
	}
	
	.tui-tabs-fixed {
		position: fixed;
		left: 0;
	}
	
	.tui-tabs-fixed::before,
	.tui-tabs-relative::before {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}
	
	.tui-unlined::before {
		border-bottom: 0 !important
	}
	
	.tui-tabs-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-tabs-disabled {
		opacity: .6;
	}
	
	.tui-tabs-title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
	}
	
	.tui-tabs-active {
		transition: all 0.15s ease-in-out;
	}
	
	.tui-tabs-slider {
		border-radius: 40rpx;
		position: absolute;
		left: 0;
		transition: all 0.15s ease-in-out;
		z-index: 0;
	}
	.cuIcon-taxi::before{
		color: #000000;
		padding-right: 10upx;
	}
	.cuIcon-taxi{
		padding-top: 20upx;
		padding-bottom: 10upx;
	}
	.cuIcon-title{
		padding-top: 20upx;
		padding-bottom: 10upx;
	}
	.cuIcon-radioboxfill::before{
		color: #11CC99;
		padding-right: 10upx;
		padding-top: 10upx;
	}
	.cuIcon-radioboxfill{
		padding-top: 20upx;
		padding-bottom: 10upx;
	}
	.cuIcon-more::before{
		color: white;
		background-color: #11CC99;
		border-radius: 50%;
		margin-right: 22upx;
	}
	.cuIcon-timefill::before{
		color: #11CC99;
	}
	.cuIcon-moneybagfill::before{
		color: #11CC99;
	}
	.cuIcon-timefill::before{
		padding: 0upx 22upx;
	}
	.cuIcon-more{
		padding-left: 22upx;
	}
	.cuIcon-moneybagfill::before{
		margin: 0upx 22upx;
	}
	.cu-form-groupt{
		padding-left: 64upx;
	}
	/* .qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	} */
</style>